<!--
- Author:   .
- Date:    2017/7/4 0004.
- File:    list.
-->
<template>
  <div>
    <app-down></app-down>
    <div class="Web_Box">
      <div class="appdown f-cb">
        <div class="applogo"><img src="../../assets/images/message_logo.png"></div>
        <div class="iconfont icon-shoppingcart"></div>
        <div class="SearchBox" style="margin: 7px 50px 7px 80px;overflow: hidden;display: block;">
          <div class="SearchBor xd hidden"> <i class="iconfont icon-search lh70"></i>
            <input type="text" class="SearchInp pl80" placeholder="搜索您需要的商品">
          </div>
        </div>
      </div>
      <!--分类Start-->
      <!--<div class="classification">-->
      <!--<div class="fenlie">-->
      <!--<ul>-->
      <!--&lt;!&ndash;<li class="cur"><a href="index.html">首页</a></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li><router-link :to="{name: 'goods-listGoods', params: {classifyId: '1', class_name: '古田馆'}}">古田馆</router-link></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li><a href="javascript:">快递鲜花</a></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li><a href="javascript:">同城鲜花</a></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li><a href="javascript:">家居生活</a></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li><a href="javascript:">美妆个护</a></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li><a href="javascript:">节日礼品</a></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li><a href="javascript:">时令鲜果</a></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li><a href="javascript:">进口直供</a></li>&ndash;&gt;-->
      <!--<li @click="goClassList(item)" v-for="item in goodsClassList"><a href="javascript:">{{item.stc_name}}</a></li>-->
      <!--</ul>-->
      <!--</div>-->
      <!--</div>-->
      <!--<div class="TwoLevelClassification bg_fff hidden tc mb20 xd f22">-->
      <!--<ul>-->
      <!--<li :class="{'on': currentClassify == ''}" @click="selectGoodsClassify('')">所有商品</li>-->
      <!--<li v-for="item in goodsClassList" :class="{'on': currentClassify == item.stc_id}" @click="selectGoodsClassify(item.stc_id)">{{item.stc_name}}</li>-->
      <!--</ul>-->
      <!--</div>-->
      <!--分类End-->
      <mt-swipe :auto="4000" style="margin-top: 40px;" class="banner swiper-container">
        <mt-swipe-item class="swiper-slide" v-for="(item,index) in bannerList" :key="index">
          <div class="swiper-slide" @click="gotoUrl(item.p_url)">
            <img :src="hostName + $config.adImgSrc + item.image_src" alt=""/></div>
        </mt-swipe-item>
      </mt-swipe>
      <!--通知栏-->
      <div class="scrollbar">
        <div class="scrollbar_icon"> <i class="iconfont icon-gonggao1"></i> </div>
        <div class="scrollbar_con">
          <div v-show="showInform" id="scrollbar_text" v-bind:style="{top: informTop + 'rem'}" style="transition: all 0.5s;">
            <span @click="gotoNewsDetail(item)" v-for="item in noticeData" class="slh" style="line-height: 2rem;"><a href="javascript:">{{item.article_title}}</a></span>
          </div>
        </div>
      </div>
      <!--专场-->
      <div class="Recommend">
        <ul>
          <!--<li @click="notice()"><div class="cpic"><img src="../../assets/images/chunqiu/vip_libao.jpg" alt=""></div><span>VIP大礼包</span></li>-->
          <li><router-link :to="{name: 'goods-listGoods', params: {classifyId: '-1', class_name: 'VIP大礼包', goodstype: '3'}}"><div class="cpic"><img src="../../assets/images/chunqiu/vip_libao.jpg" alt=""></div><span>VIP大礼包</span></router-link></li>
          <li @click="notice()"><div class="cpic"><img src="../../assets/images/chunqiu/tuijian.jpg" alt=""></div><span>每日推荐</span></li>
          <li @click="notice()"><div class="cpic"><img src="../../assets/images/chunqiu/xinshou.png" alt=""></div><span>新手专场</span></li>
          <li @click="notice()"><div class="cpic"><img src="../../assets/images/chunqiu/laoyonghu.png" alt=""></div><span>老用户专场</span></li>
          <li><router-link :to="{name: 'category-list'}"><div class="cpic"><img src="../../assets/images/chunqiu/fenlei.jpg" alt=""></div><span>所有分类</span></router-link></li>
        </ul>
      </div>
      <!--VIP专区-->
      <div class="daybk">
        <i class="iconfont icon-yurerongqi"></i>
        <div class="biaoti"><router-link :to="{name: 'goods-listGoods', params: {classifyId: '-1', class_name: 'VIP专区', goodstype: '3'}}">VIP专区<b >VIPZONE</b><a class="morewenzi" style="color: #cc0000">全部产品<i class="iconfont icon-more" style="color: #cc0000"></i></a></router-link></div>
        <ul>
          <li v-for="item in vipData" @click="gotoGoodsDetail(item)">
            <div class="syphoto"><img :src="hostName + $config.goodsImgSrc + item.goods_image" alt=""></div>
            <a href="javascript:">
              <span><i class="iconfont icon-gold"></i> {{item.goods_name}}</span><br><h5 class="jiage"><i>￥</i>{{item.goods_price}}</h5></a><b></b>
          </li>
        </ul>
      </div>
      <!--精品生活-->
      <!--<div class="quality" v-show="jpData != ''">-->
      <!--<i class="iconfont icon-yurerongqi"></i>-->
      <!--<div class="biaoti">精品生活<i >QUALITY OF LIFE</i></div>-->
      <!--<ul v-for="item in jpData">-->
      <!--<li><a href=""><div class="quality_photo"><img :src="hostName + $config.goodsImgSrc + item.goods_image" alt=""></div><span>{{item.goods_name}}</span></a></li>-->
      <!--</ul>-->
      <!--</div>-->
      <div class="quality" v-show="jpData != ''">
        <i class="iconfont icon-yurerongqi"></i>
        <div class="biaoti"><router-link :to="{name: 'category-list'}">精品生活<b>QUALITY OF LIFE</b><a class="morewenzi" style="color: #cc0000">全部产品<i class="iconfont icon-more" style="color: #cc0000"></i></a></router-link></div>
        <ul>
          <li v-for="item in jpData" @click="gotoGoodsDetail(item)"><a><div class="quality_photo"><img :src="hostName + $config.goodsImgSrc + item.goods_image" alt=""></div><span>{{item.goods_name}}</span><br><h5 class="jiage"><i>￥</i>{{item.goods_price}}</h5></a></li>
        </ul>
      </div>

      <!--花粉专区-->
      <!--<div class="hot_list" v-show="hfData != ''">-->
        <!--<i class="iconfont icon-yurerongqi"></i>-->
        <!--<div class="biaoti"><router-link :to="{name: 'goods-listGoods', params: {classifyId: '-1', class_name: '花粉专区', goodstype: '4'}}">花粉专区<b >POLLEN ZONE</b><a class="morewenzi" style="color: #cc0000">全部产品<i class="iconfont icon-more" style="color: #cc0000"></i></a></router-link></div>-->
        <!--<div class="hotbox" v-for="item in hfData">-->
          <!--<div @click="gotoGoodsDetail(item)">-->
            <!--<div class="hot_left"><img :src="hostName + $config.goodsImgSrc + item.goods_image" alt=""></div>-->
            <!--<div class="hot_right">-->
              <!--<span>{{item.goods_name}}</span>-->
              <!--<h5>原价:￥{{item.goods_price}}</h5>-->
              <!--<h4 style="color: #f2782c">花粉:￥<i>{{item.goods_price}}</i></h4>-->
            <!--</div>-->
            <!--<div class="hot_button">马上抢</div>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
      <!--商品分类Start-->
      <!--<div class="CommodityClassification">-->
      <!--<div class="con"-->
      <!--v-infinite-scroll="loadMoreGoods"-->
      <!--infinite-scroll-disabled="false"-->
      <!--infinite-scroll-distance="0"-->
      <!--infinite-scroll-immediate-check="false">-->
      <!--<ul id="content">-->
      <!--<li v-for="item in goods.data" @click="gotoGoodsDetail(item)" style="width: 7.25rem;">-->
      <!--<div class="pic"><img :src="hostName + $config.goodsImgSrc + item.goods_image" alt=""/></div>-->
      <!--<h3 class="slh2">{{item.goods_name}}-->
      <!--</h3>-->
      <!--<p class="Price">￥{{item.goods_price}}</p>-->
      <!--</li>-->
      <!--</ul>-->
      <!--</div>-->
      <!--<loading-more :allLoaded="goods.allLoaded" :show="goods.data.length > 0"></loading-more>-->
      <!--<empty-data :show="goods.allLoaded && goods.data.length <= 0" style="margin-top: 1.5rem"></empty-data>-->
      <!--</div>-->
      <!--商品分类End-->

    </div>
    <!--<pull-more-promt :show="true"></pull-more-promt>-->
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'
  import PullMorePromt from '../../components/pullMoreNotice'
  import {Swipe, SwipeItem} from 'mint-ui'
  import HotNews from '../../components/hot-news.vue'

  export default{
    mixins: [
      mapModules({goodsClassList: 'goodsClassList'}),
      mapRules({once: 'goodsClassList'})
    ],
    data() {
      return {
        currentClassify: this.$route.query.id || '15', // ：全部类型
        goods: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        bannerList: [],
        informTop: 0,
        showInform: true,
        informData: [{url: '', content: '1.2018-09-14停服1天'}, {url: '', content: '2.2018-10-01国庆优惠活动！'}, {url: '', content: '3.2018-10-01国庆优惠活动！'}],
        hostName: 'http://' + window.location.hostname,
        vipData: [],
        jpData: [],
        hfData: [],
        noticeData: []
      }
    },
    components: {
      'mtSwipe': Swipe,
      'mtSwipeItem': SwipeItem,
      'hotNews': HotNews,
      'pullMorePromt': PullMorePromt
    },
    created() {
      this.getBannerList()
      // this.getGoodsByClassify(this.currentClassify, this.goods.page, this.goods.pageSize, '')
      setTimeout(() => {
        this.initInformAnimate()
      }, 1000)
      this.getGoodsByClassify('100', 1, 12, '3')
      this.getGoodsByClassify('200', 1, 6, '71')
      this.getGoodsByClassify('300', 1, 12, '4')
      this.getNewsList(1, 10)
    },
    watch: {
      $route () {
        this.currentClassify = this.$route.query.id || ''
        this.initGoodsList()
        this.getGoodsByClassify(this.currentClassify, this.goods.page, this.goods.pageSize)
      }
    },
    methods: {
      notice() {
        this.$messageBox.alert('等待开放').then(data => {
        })
      },
      gotoNewsDetail(item) {
        if (item.article_url) {
          this.$router.push({name: 'iframe', query: {url: item.article_url, share: 'true'}})
        } else {
          this.$router.push({name: 'news-detail', params: {id: item.article_id}})
        }
      },
      goClassList(item) {
        this.$router.push({name: 'goods-listGoods', params: {classifyId: item.stc_id, class_name: item.stc_name}})
      },
      gotoUrl(url) {
        if (url == '') {
          return
        }
        if (url.indexOf(this.$config.website) != -1) {
          window.location.href = url // eslint-disable-line
        } else {
          // this.$router.push({name: 'iframe', query: {url: url}})
        }
      },
      getNewsList(page, pageSize) {
        this.$request.GetArticleType(page, pageSize).then(data => {
          this.noticeData = data
        }).finally(() => {
        })
      },
      getBannerList() {
        this.$request.getAdvList().then(data => {
          this.bannerList = data
        })
      },
      gotoGoodsDetail(goods) {
        // if (goods.goods_unit == '2') {
        //   this.$toast('该商品只能线下购买，请联系客服')
        //   return
        // }
        this.$router.push({name: 'goods-detail', params: {id: goods.goods_commonid}})
//        window.location.href = 'http://' + window.location.host + '/wap/goods/detail/' + goodsCommonid // ios微信分享要如此跳转后才能正确分享
      },
      selectGoodsClassify(id) {
//        this.currentClassify = id
//        this.initGoodsList()
//        this.getGoodsByClassify(id, this.goods.page, this.goods.pageSize)
        this.$router.replace({name: 'goods-classify', query: {id: id}})
      },
      initGoodsList() {
        this.goods.requested = false
        this.goods.loading = false
        this.goods.allLoaded = false
        this.goods.page = 1
        this.goods.pageSize = 10
        this.goods.data = []
      },
      getGoodsByClassify(id, page, pageSize, gc_id) {
        this.goods.loading = true
        this.$request.getGoodsByClassify(id, page, pageSize, gc_id).then(data => {
          if (data.goods_list.length < this.goods.pageSize) {
            this.goods.allLoaded = true
          }
          if (id == '100') {
            this.vipData = data.goods_list
          } else if (id == '200') {
            this.jpData = data.goods_list
          } else if (id == '300') {
            this.hfData = data.goods_list
          } else {
            this.goods.data = [...this.goods.data, ...data.goods_list]
          }
        }).finally(() => {
          this.goods.requested = true
          this.goods.loading = false
        })
      },
      loadMoreGoods() {
        if (this.goods.loading || this.goods.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getGoodsByClassify(this.currentClassify, ++this.goods.page, this.goods.pageSize)
        }, 500)
      },
      initInformAnimate() {
        var informData = this.informData
        this.informTop = -2
        if (informData.length <= 1) {
          return
        } else {
          var informIndex = 1
          setInterval(() => {
            if (informIndex <= informData.length) {
              informIndex++
              this.informTop = informIndex * -2
              if (informIndex > informData.length) {
                setTimeout(() => {
                  this.showInform = false
                }, 500)
              }
            } else {
              informIndex = 0
              this.informTop = 0
              this.showInform = true
            }
          }, 4000)
        }
      }
    }
  }
</script>

<style>

</style>
